{% extends 'IcsocUIBundle::page.html.twig' %}
{% from 'IcsocUIBundle:Macro:actions.html.twig' import create %}
{% from 'IcsocUIBundle:Macro:formValidator.html.twig' import jqvalidator %}

{% block stylesheet %}
    {{ parent() }}
    {% stylesheets
    '@jquery_ui_css'
    '@jqgird_css'
    '@chosen_css'
    '@gritter_css'
    filter="cssrewrite"  filter='uglifycss'
    %}
    <!--suppress ALL -->
    <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}

{% block content %}
    <div class="page-content">
        <form class="form-horizontal" role="form" method="post" id="evaluate_form" >
            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="evaluate_name"> <font color="red">*</font> {{ 'Evaluate Name'|trans }} </label>
                <div class="col-sm-7">
                    <input type="text" id="evaluate_name" name="evaluate_name" placeholder="{{ 'Evaluate Name'|trans }}" class="col-xs-10 col-sm-5">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="evaluate_sound"> <font color="red">*</font> {{ 'Evaluate Sound'|trans }} </label>
                <div class="col-sm-7">
                    <select id="evaluate_sound" name="evaluate_sound" class="col-xs-10 col-sm-5">
                        <option value=""> {{ 'Please Select Sound'|trans }} </option>
                        {% for key, sound in sounds %}
                            <option value="{{ sound.id }}">
                                {{ sound.name }}
                            </option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right"></label>
                <div class="col-sm-7">
                    <audio id="evaluate_player" style="margin-top: 8px;color: white" controls="controls">
                        {{ 'Your browser does not support this player!'|trans }}
                    </audio>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="evaluate_play_order"> <font color="red">*</font> {{ 'Evaluate Play Order'|trans }} </label>
                <div class="col-sm-7">
                    <input type="text" id="evaluate_play_order" name="evaluate_play_order" placeholder="{{ 'Evaluate Play Order'|trans }}" class="col-xs-10 col-sm-5">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="evaluate_retry_times"> {{ 'Evaluate Retry Times'|trans }} </label>
                <div class="col-sm-7">
                    <select id="evaluate_retry_times" name="evaluate_retry_times" class="col-xs-10 col-sm-5" data-placeholder="{{ 'Evaluate Retry Times'|trans }}">
                        {% for key, retry_times in retry_times %}
                            <option value="{{ key }}">
                                {{ retry_times|trans }}
                            </option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> {{ 'Evaluate Valid Keys'|trans }} </label>
                <div class="col-sm-7">
                    <select id="evaluate_valid_keys" name="evaluate_valid_keys[]" class="chosen-select col-xs-10 col-sm-5" multiple="multiple" data-placeholder="{{ 'Evaluate Valid Keys'|trans }}">
                        {% for key, valid_keys in valid_keys %}
                            <option value="{{ key }}">
                                {{ valid_keys|trans }}
                            </option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            {{ create(path('icsoc_evaluate_index')) }}
        </form>
    </div>
{% endblock %}

{% block footer %}
    {% javascripts
    '@jqgird_js'
    '@jquery_ui_js'
    '@chosen_js'
    '@bootbox_js'
    '@gritter_js'
    '@common_js'
    '@jqvalidate_js'
    %}
    <script type="text/javascript" src="{{ asset_url }}"></script>
    {% endjavascripts %}
    <script>
        $(document).ready(function(){
            $('#evaluate_name').val("{{ evaluateInfo.name|default('') }}");
            $('#evaluate_sound').val("{{ evaluateInfo.sound_id|default('') }}");
            $('#evaluate_play_order').val("{{ evaluateInfo.play_order|default(1) }}");
            $('#evaluate_retry_times').val("{{ evaluateInfo.retry_times|default(1) }}");
            var valid_keys = "{{ evaluateInfo.valid_keys|default('') }}";
            if (valid_keys != '') {
                valid_keys = valid_keys.split(',');
                $('#evaluate_valid_keys').val(valid_keys);
            }

            $('.chosen-select').chosen({width: '350px', allow_single_deselect:true});

            if ($("#evaluate_sound").val() != '') {
                var sound_id = $("#evaluate_sound").val();
                var url = "{{ path('icsoc_sound_play') }}?sound_id="+sound_id;
                $('#evaluate_player').attr("src", url);
            }

            $('#evaluate_form').validate({
                {{ jqvalidator() }}
                rules: {
                    evaluate_name: "required",
                    evaluate_sound: "required",
                    evaluate_play_order: "required, isNumber",
                    evaluate_play_order: {required:true,isNumber:true},
                },
                messages: {
                    evaluate_name: '{{ 'Evaluate Name Not Empty'|trans }}',
                    evaluate_sound: '{{ 'Please Select Sound'|trans }}',
                    evaluate_play_order: '{{ 'Play Order Verify'|trans }}',
                }
            })

            $('#evaluate_sound').on('change', function() {
                var sound_id = $(this).val()
                var url = "{{ path('icsoc_sound_play') }}?sound_id="+sound_id;
                $('#evaluate_player').attr("src", url);
                $('#evaluate_player').attr('autoplay', 'autoplay');
            });

            jQuery.validator.addMethod("isNumber", function(value, element) {
                var reg = /^[1-9]\d{0,2}$/;
                return this.optional(element) || (reg.test($.trim(value)));
            }, "{{ 'Must be an integer'|trans }}");
        })
    </script>
{% endblock %}